

<template>
  <div class="maintenance">
    <div class="title" style="padding:0 0 30px 0; font-size:18px;">后期管护信息</div>
    <div class="filter-container">
      <el-form :inline="true" label-position="right" label-width="185px">
        <div>
          <el-form-item label="后期管护协议签订时间">
            <el-date-picker
              :readonly="disabled"
              v-model="listQuery.signingTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width:200px;"
            ></el-date-picker>
          </el-form-item>
        </div>
        <el-form-item label="签订协议参与人员">
          <el-input :readonly="disabled" v-model="listQuery.participant" placeholder />
        </el-form-item>
        <el-form-item label="后期管护与利用具体管护责任人" label-width="220px">
          <el-input :readonly="disabled" v-model="listQuery.specificLeader" placeholder />
        </el-form-item>
        <el-form-item label="后期管护监督检查责任人">
          <el-input :readonly="disabled" v-model="listQuery.examineLeader" placeholder />
        </el-form-item>
        <div class="title" style="padding:20px 0 30px 0; font-size:18px;">附件信息</div>
        <div>
          <el-form-item label="管护协议" label-width="105px">
            <el-upload
              v-if="!disabled"
              accept=".pdf"
              :disabled="disabled"
              :limit="1"
              :before-upload="uploadBefore"
              :file-list="fileList[0]"
              class="upload-demo"
              :action="uploadUrl"
              :on-success="handleUploadSuccess"
            >
              <!-- :file-list="fileList"
              :on-success="getreport"-->
              <el-button v-if="!disabled" size="small">上传</el-button>
              <!-- <el-button @click="seePdf(0)" v-if="disabled" size="small">查看</el-button> -->
            </el-upload>
            <seeFujianForList
              v-if="disabled && fileList[0]"
              @openPdf="seePdf"
              :file-obj="fileList[0]"
              :file-num="0"
            />
          </el-form-item>
        </div>
        <div></div>
      </el-form>
      <div class="btn">
        <el-button v-if="!disabled" @click="submitData" class="filter-item" type="primary">确定</el-button>
        <el-button @click="back" class="filter-item">返回</el-button>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getList } from "@/api/project/fksqtc/personApplyCheck";
// import axios from "axios";
import config from "@/config/index.js";
import {
  getLaterProjectManagement,
  saveLaterProjectManagement,
  getFile
} from "@/api/completionAcceptance/LaterProjectManagement.js";
import seeFujianForList from "@/components/seeFujianForList";
export default {
  components: {
    seeFujianForList
  },
  filters: {},
  data() {
    return {
      uploadUrl: config.uploadUrl,
      listQuery: {
        // page: 1,
        // size: 10,
        // id:'',
        signingTime: "",
        participant: "",
        specificLeader: "",
        examineLeader: "",
        agreementId: ""
      },
      fileList: [],
      value1: null,
      projectId: localStorage.getItem("projectId"),
      disabled: true,
      pdfUrl: "",
      pdfFlag: false,
      pdfName: ""
    };
  },
  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = false;
    }
    this.getData();
  },
  methods: {
    //查看当前PDF
    seePdf(num) {
      this.pdfFlag = true;
      this.pdfUrl = this.fileList[num][0].url;
      this.pdfName = this.fileList[num][0].name;
    },
    back() {
      this.$router.push("/projectManagement/projectImplementation/dealwith");
    },
    submitData() {
      if (
        this.listQuery.signingTime == "" ||
        this.listQuery.signingTime == null
      ) {
        this.$alert("后期管护协议签订时间未选择", "提示", {
          callback: action => {}
        });
        return;
      }
      if (
        this.listQuery.participant == "" ||
        this.listQuery.participant == null
      ) {
        this.$alert("签订协议参与人员未填写", "提示", {
          callback: action => {}
        });
        return;
      }
      if (
        this.listQuery.specificLeader == "" ||
        this.listQuery.specificLeader == null
      ) {
        this.$alert("后期管护与利用具体管护责任人未填写", "提示", {
          callback: action => {}
        });
        return;
      }
      if (
        this.listQuery.examineLeader == "" ||
        this.listQuery.examineLeader == null
      ) {
        this.$alert("后期管护监督检查责任人未填写", "提示", {
          callback: action => {}
        });
        return;
      }
      if (
        this.listQuery.agreementId == "" ||
        this.listQuery.agreementId == null
      ) {
        this.$alert("未上传管护协议", "提示", {
          callback: action => {}
        });
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      var data = this.listQuery;
      // data["signingTime"] = data["signingTime"] + " " + "00:00:00"
      data["projectId"] = this.projectId;
      saveLaterProjectManagement(data)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$router.push(
            "/projectManagement/projectImplementation/dealwith"
          );
        })
        .catch(err => {
          loading.close();
        });
    },
    getData() {
      var data = {
        projectId: this.projectId
      };
      getLaterProjectManagement(data).then(res => {
        console.log(res, "我是数据都嘛");
        if (res.data) {
          // this.listQuery = res.data
          this.listQuery.signingTime = res.data.signingTime.slice(0, 10);
          this.listQuery.participant = res.data.participant;
          this.listQuery.specificLeader = res.data.specificLeader;
          this.listQuery.examineLeader = res.data.examineLeader;
          this.listQuery.agreementId = res.data.agreementId;
          if (res.data.agreementId) {
            var data1 = {
              fileId: res.data.agreementId
            };
            getFile(data1).then(res1 => {
              this.fileList = [
                [{ name: res1.data.fileName, url: res1.data.filePath }]
              ];
            });
          }
        }
      });
    },
    //文件提交前
    uploadBefore: function(file) {
      var isTpye = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (isTpye != "pdf") {
        this.$message({
          showClose: true,
          message: "上传文件只能是pdf格式!",
          type: "error"
        });
        return false;
      }
    },
    handleUploadSuccess: function(res, file, fileList) {
      //工程复核报告文件上传成功回调
      this.listQuery.agreementId = res.data.id;
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-form--inline .el-form-item__label {
  color: #a1a1a1;
}

.maintenance {
  padding: 20px 20px 0 20px;
  min-height: calc(100vh - 154px);
  background-color: #fff;
}
.btn {
  margin-top: 30px;
}
</style>